<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div{
            width: 300px;
            height: 300px;
            background-color: pink;
            margin: 0 auto;
        }
        .son{
            width: 200px;
            height: 200px;
            margin: 0 auto;
            background-color: blueviolet;
        }
    </style>
</head>
<body>
        <div>showEvent</div>
        <a href="http://www.baidu.com">阻止跳转addEventListener</a>
        <a href="http://www.baidu.com">阻止跳转onclick</a>
        
        <div class="father">
            <div class="son">阻止事件冒泡</div>
        </div>
        <script>
            var d1  =  document.querySelector('div')
            d1.addEventListener('click',function(event){
                // event形参代表事件对象 系统生成 可以直接使用
                console.log(event);
                // this代表的是绑定事件的元素  event.targe是被点的那个元素
                alert(event.target,this)
            },false)

            var a1 = document.querySelector('a')
            a1.addEventListener('click',function(event){
                // 阻止默认事件
                event.preventDefault()
            })
            
            var a2 = document.querySelectorAll('a')
            a2[1].onclick = function (e){
                // onclick阻止默认事件
                e.preventDefault()
                // event.returnValue //低版本浏览器使用
                // return false
            }

            var fdiv =  document.querySelector('.father')
            var s = document.getElementsByClassName('son')
            var sdiv  = s[0]
            fdiv.addEventListener('click',function(e){
                alert('father')   
            },false)
            
            sdiv.addEventListener('click',function(e){
                // 阻止事件冒泡
                e.stopPropagation()
                // e.cancelBubble = true //低版本写法
                alert('son')
            },false)
        </script>
</body>
</html>